<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
</head>

<body>


  <script>
    // 原数据
    let person = {
      name: '张三',
      age: 18,
    }
    // 代理数据 
    const proxyPerson = {}

    const keys = Object.keys(person);
    keys.forEach(key => {
      Object.defineProperty(proxyPerson, key, {
        configurable: true, // 配置是否可以删除
        get() {
          return person[key];
        },
        set(value) {
          person[key] = value;
          console.log('能修改，可以进行响应式处理');
        }
      });
    });

    console.log('person', person);
    console.log('proxyPerson', proxyPerson);

    function updateName() {
      proxyPerson.name = '李四';
      console.log('person', person);
      console.log('proxyPerson', proxyPerson);
    }

    function addsex() {
      proxyPerson.sex = '女';
      console.log("能添加，但无法实现响应式");
      console.log('person', person);
      console.log('proxyPerson', proxyPerson);
    }

    function deleteName() {
      console.log(delete proxyPerson.name, "配置了 configurable: true 能删除，但无法实现响应式");
      console.log('person', person);
      console.log('proxyPerson', proxyPerson);
    }

  </script>
  <h2>vue 2 能支持响应式</h2>
  <button onclick="updateName()">修改名称为 李四</button>

  <h2>vue 2 不能支持（可以使用 Vue.$set 或 Vue.$delete来解决）</h2>
  <button onclick="deleteName()">删除名称属性</button>
  <br><br>
  <button onclick="addsex()">添加性别为 女</button>
</body>

</html>